<template>
  <div ref="chart">
  </div>
</template>

<script>
  import echarts from 'echarts';

  export default {
    name: 'Network',
    data() {
      return {
        chart: '',
        data: [],
        option: {
          title: {
            text: 'CO2浓度'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['测点1', '测点2', '测点3']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            data: (function () {
              var now = new Date();
              var res = [];
              var len = 10;
              while (len--) {
                res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
                now = new Date(now - 5*1000);
              }
              return res;
            })()
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '测点1',
              type: 'line',
              step: 'start',
              data: (function () {
                var res = [];
                var len = 10;
                while (len--) {
                  res.push(Math.round(Math.random() * 10)+60);
                }
                return res;
              })()
            },
            {
              name: '测点2',
              type: 'line',
              step: 'middle',
              data: (function () {
                var res = [];
                var len = 10;
                while (len--) {
                  res.push(Math.round(Math.random() * 10)+50);
                }
                return res;
              })()
            },
            {
              name: '测点3',
              type: 'line',
              step: 'end',
              data: (function () {
                var res = [];
                var len = 10;
                while (len--) {
                  res.push(Math.round(Math.random() * 10)+40);
                }
                return res;
              })()
            }
          ]
        }
      };
    },
    mounted() {
      this.chart = echarts.init(this.$refs['chart']);
      this.chart.setOption(this.option, true);
      var chart = this.chart;
      var one = this.option;
      setInterval(function () {
        let axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');
        let data0 = one.series[0].data;
        let data1 = one.series[1].data;
        let data2 = one.series[2].data;
        data0.shift();
        data0.push(Math.round(Math.random() * 10)+60);
        data1.shift();
        data1.push(Math.round(Math.random() * 10)+50);
        data2.shift();
        data2.push(Math.round(Math.random() * 10)+40);
        one.xAxis.data.shift();
        one.xAxis.data.push(axisData);
        chart.setOption(one);
      }, 5*1000);
    }
  };
</script>

<style scoped>
  .m-map {
    width: 100%;
    height: 100%;
  }
</style>
